<template>
  <commonformdialog
    :isshowDialogs="isshowDialog"
    :dialogTitle="dialogTitle"
    @closetextDialog="closeDialog"
    @confirmbtn="confirmbtn"
     :dialogWidth="'50%'"
  >
    <!-- form表单区域 -->
    <div class="formarea">
      <el-form

        ref="xlcform"
        :model="xlcforms"
        :rules="rules"
        size="medium"
        label-width="80px"
      >
        <el-row>
          <el-col :span="8">
            <el-row>
              <el-form-item label="关联机构" prop="team_id">
                <treeselect v-model="xlcforms.team_id" :options="treeOptions" :default-expand-level="1" :normalizer="normalizer"
                  placeholder="请选择关联机构" />
             <!--   <el-select
                  v-model="xlcforms.school_id"
                  placeholder="请选择关联校区"
                  collapse-tags
                  multiple
                  clearable
                  :style="{ width: '100%' }"
                  @change='checkAll($event)'
                >
                 <el-option
              :label="slesecAlltext"
              value='0'
            ></el-option>
                  <el-option
                    v-for="(item, index) in school_idOptions"
                    :key="index"
                    :label="item.title"
                    :value="item.id"
                    :disabled="item.disabled"
                  ></el-option>
                </el-select> -->
              </el-form-item>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row>
              <el-form-item label="训练场" prop="title">
                <el-input
                  v-model="xlcforms.title"
                  placeholder="请输入训练场名称"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row>
              <el-form-item label="科目" prop="subject_type">
                <el-select
                  v-model="xlcforms.subject_type"
                  placeholder="请选择科目"
                  collapse-tags
                  multiple
                  clearable
                  :style="{ width: '100%' }"
                >
                  <el-option
                    v-for="(item, index) in subject_typeOptions"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                    :disabled="item.disabled"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-row>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-row>
              <el-form-item label="培训车型" prop="train_type">
                <el-select
                  v-model="xlcforms.train_type"
                  placeholder="请选择培训车型"
                  collapse-tags
                  multiple
                  clearable
                  :style="{ width: '100%' }"
                >
                  <el-option
                    v-for="(item, index) in train_typeOptions"
                    :key="index"
                    :label="item.title"
                    :value="item.id"
                    :disabled="item.disabled"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row>
              <el-form-item label="联系人" prop="link_man">
                <el-input
                  v-model="xlcforms.link_man"
                  placeholder="请输入联系人"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row>
              <el-form-item label="联系电话" prop="link_tel">
                <el-input
                  v-model="xlcforms.link_tel"
                  placeholder="请输入联系电话"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-row>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-row>
              <el-form-item label="投放车辆" prop="have_cars">
                <el-input
                  v-model="xlcforms.have_cars"
                  placeholder="已投放车辆数量"
                  clearable
                  :style="{ width: '100%' }"
                >
                </el-input>
              </el-form-item>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row>
              <el-form-item label="面积" prop="measure_area">
                <el-input
                  v-model="xlcforms.measure_area"
                  placeholder="平方米"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row>
              <el-form-item label="容纳车辆" prop="max_cars">
                <el-input
                  v-model="xlcforms.max_cars"
                  placeholder="容纳车辆数量"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-row>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="经营方式" prop="belong_type">
              <el-radio-group v-model="xlcforms.belong_type" size="medium">
                <el-radio
                  v-for="(item, index) in belong_typeOptions"
                  :key="index"
                  :label="item.value"
                  :disabled="item.disabled"
                >
                  {{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
           <el-form-item label="基础设施" prop="facilities">
             <el-checkbox-group v-model="xlcforms.facilities" size="medium">
               <el-checkbox
                 v-for="(item, index) in facilitiesOption"
                 :key="index"
                 :label="item.id"
                 :disabled="item.disabled"
               >
                 {{ item.title }}
               </el-checkbox>
             </el-checkbox-group>
           </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="地址" prop="address">
              <el-input
                placeholder="请点击右边选择地图来选择地址"
                :disabled="true"
                v-model="xlcforms.address"
              >
                <template slot="append">
                  <el-button @click="selectmap">选择地图</el-button>
                </template>
              </el-input>
            </el-form-item>
            <mapDialog
              v-if="isshowmap"
              :isshowmapDialog="isshowmap"
              @closemap="closemap"
              @affirmMaps="affirmMap"
              :userSelectinfo="selectmapinfo"
            ></mapDialog>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item :label="'封面图'" prop="head_img" :disabled='true'>
              <uploader :initUrl="xlcforms.head_img" @uploadimgok="head_imgok" @deleteimg='head_imgdel'>
                <span slot="text">
                  支持上传不大于10M的JPEG、JPG、PNG、BMP图片
                </span>
              </uploader>
            </el-form-item>

          </el-col>
        </el-row>
        <el-row>
          <el-col>
          <el-form-item :label="'详情图'" prop="picture" :disabled='true'>
            <uploader :initUrl="xlcforms.picture" @uploadimgok="pictureok" @deleteimg='picturedel'  :fixedNumber="[2,1]">
              <span slot="text">
                支持上传不大于10M的JPEG、JPG、PNG、BMP图片
              </span>
            </uploader>
          </el-form-item>

          </el-col>
        </el-row>
      </el-form>
    </div>
  </commonformdialog>
</template>

<script>
//弹窗外壳
import commonformdialog from '@/components/commondialog/commondialog'
//地图弹窗组件
import mapDialog from '@/components/selectmap/selectmap'
//引入图片上传组件
import uploadimg from '@/components/uploadimg/uploadimg'
  //引入图片上传组件
  import uploader from '@/components/uploadImgNew/uploadImgNew'
//api
import {createData,readData,editData} from '@/api/train'
//获取sessionStorage
import {getSessionStorage} from '@/utils/accessToken'
import Treeselect from "@riophae/vue-treeselect"; //下拉树组件
export default {
  data() {
    return {
       slesecAlltext:'选择所有校区',
      //是否选中了全选
      isSelectAll:false,
      //用户选择的地图
      selectmapinfo: {},
      //是否显示地图
      isshowmap: false,
      //训练场表单
      xlcforms: {
        belong_type: '',
        team_id:null,
        title: '',
        subject_type: [],
        train_type: [],
        facilities: [],
        link_man: '',
        link_tel: '',
        have_cars: '',
        measure_area: '',
        max_cars: '',
        //地址
        address: '',
        //坐标信息
        lat: '',
        lng: '',
        //上传图片
        head_img: '',
        picture:''
      },
      rules: {
        team_id: [
          {
            required: true,
            message: '请选择一个关联机构',
            trigger: 'change',
          },
        ],
        belong_type: [],
        title: [
          {
            required: true,
            message: '请输入训练场',
            trigger: 'blur',
          },
          {
          pattern: /训练场$/,
          message: '必须以“训练场”结尾',
          trigger: 'blur'
        }
        ],
        subject_type: [
          {
            required: true,
            type: 'array',
            message: '请至少选择一个科目',
            trigger: 'change',
          },
        ],
        train_type: [
          {
            required: true,
            type: 'array',
            message: '请至少选择一个培训车型',
            trigger: 'change',
          },
        ],
        link_man: [
          {
            required: true,
            message: '请输入联系人',
            trigger: 'change',
          },
        ],
        address: [
          {
            required: true,
            message: '请选择地址',
            trigger: 'change',
          },
        ],
        belong_type: [
          {
            required: true,
            message: '请选择经营方式！',
            trigger: 'change',
          },
        ],
        link_tel: [
          {
            required: true,
            message: '请输入手机号',
            trigger: 'change',
          },
          {
            pattern: /^1\d{10}$/,
            message: '手机号有误',
            trigger: 'blur',
          },
        ],
        have_cars: [],
        measure_area: [],
        max_cars: [],
        head_img: [
          {
            required: true,
            message: '请上传封面图',
            trigger: 'change',
          },
        ],
        picture: [
          {
            required: true,
            message: '请上传详情图',
            trigger: 'change',
          },
        ],
      },
      school_idOptions: [],
      facilitiesOption: [],
      subject_typeOptions: [
        {
          label: '科目二',
          value: 2,
        },
        {
          label: '科目三',
          value: 3,
        },
      ],
      train_typeOptions: [],
      belong_typeOptions: [
        {
          label: '直营',
          value: 1,
        },
        {
          label: '加盟',
          value: 2,
        },
      ],
        treeOptions: [],
    }
  },
  components: {
    //基础dialog
    commonformdialog,
    //地图选择组件
    mapDialog,
    //上传图片组件
    uploadimg,
    Treeselect,
    uploader
  },
  props: {
    //是否显示弹窗
    isshowDialog: {
      type: Boolean,
      default: false,
      required: true,
    },
    //表单的名字
    dialogTitle: {
      type: String,
      default: '',
      required: true,
    },
    //是编辑还是新增
    formType:{
      type:Number,
      default:0
    }
  },
  methods: {
    normalizer(node) {
      return {
        id: node.id,
        label: node.title,
        children: node.children,
      }
    },
    //如果关联分校选择 checkAll == 1 那么久全选 否则就不全选
    checkAll(val){
      //选中的length
      let len = this.xlcforms.school_id.length
      //选择的id
      let selectId = val[len-1]
      //如果等于0 说明选中了全部
      //判断值是否为空的时候
      if(len<1){
        this.slesecAlltext = '选择所有校区'
        this.isSelectAll = false
      }
      if(selectId==0){
          let  allValues = this.school_idOptions.map(item => {
        return item.id;
      });
        if(!this.isSelectAll){
          this.xlcforms.school_id = allValues
          this.slesecAlltext = '取消所有校区'
          this.isSelectAll = !this.isSelectAll
        }else{
          this.xlcforms.school_id = []
          this.slesecAlltext = '选择所有校区'
          this.isSelectAll = !this.isSelectAll
        }
      }

    },
    //删除图片
    head_imgdel(){
      this.xlcforms.head_img = ''
    },
    //上传图片成功
    head_imgok(imgUrl) {
      this.xlcforms.head_img = imgUrl
    },
    //删除图片
    picturedel() {
      this.xlcforms.picture = ''
    },
    //上传图片成功
    pictureok(imgUrl) {
      this.xlcforms.picture = imgUrl
    },
    closeDialog() {
      //重置表单 关闭弹窗
      this.$refs['xlcform'].resetFields()
      this.selectmapinfo = {}
      this.slesecAlltext = '选择所有校区'
      this.isSelectAll = false
      this.$emit('closedialog')
    },
    //确认提交表单
    confirmbtn() {
      this.$refs['xlcform'].validate(async (valid) => {
        if (!valid) return
        // TODO 提交表单
        let {
          belong_type,
          team_id,
          title,
          subject_type,
          train_type,
          link_man,
          link_tel,
          have_cars,
          measure_area,
          max_cars,
          address,
          lat,
          lng,
          facilities,
          head_img,
          picture,
          id
        } = this.xlcforms
        let params = {
          belong_type,
          team_id,
          title,
          subject_type:subject_type.join(),
          train_type:train_type.join(),
          link_man,
          link_tel,
          have_cars,
          measure_area,
          max_cars,
          address,
          lat,
          lng,
          facilities:facilities.join(','),
          head_img,
          picture
        }

        if(this.formType==0){
          let data = await createData(params)
        if(data.code=='0000'){
            this.$message({
            type: 'success',
            message: '新增成功!'
          });

        }
        }else{
          params.id = id
          let data = await editData(params)
          if(data.code=='0000'){
            this.$message({
            type: 'success',
            message: '编辑成功!'
          });

        }
        }

        //清空数据
           this.$refs['xlcform'].resetFields()
           this.$emit('confirm')
      })
    },
    //选择地图
    selectmap() {
      let mapObj = {}
      this.isshowmap = true
    },
    //关闭地图
    closemap() {
      this.isshowmap = false
    },
    //确定选择地图
    affirmMap(params) {

      this.selectmapinfo = params
      this.xlcforms.address = params.address
      this.xlcforms.lat = params.lat
      this.xlcforms.lng = params.lng
      this.isshowmap = false
    },
  },
  mounted() {
    //基础设施选项
    this.facilitiesOption = getSessionStorage('Options')[20]
    //所属校区
    this.school_idOptions = getSessionStorage('Optionsall')['school']
    //培训车辆
    this.train_typeOptions = getSessionStorage('Options')[1]
        this.treeOptions = getSessionStorage('Optionsall').team
    this.$bus.on("editformxlc",async (val)=>{
        //获取要编辑的id
        let id = val.id
        let data = await readData({id:id})
        this.xlcforms = data.data
        this.slesecAlltext = '取消所有校区'
        this.isSelectAll = true
         let {address,lat,lng} = data.data
        this.xlcforms.team_id = data.data.team_id.value
        this.xlcforms.subject_type = data.data.subject_type.value
        this.xlcforms.train_type = data.data.train_type.value
        this.xlcforms.facilities = data.data.facilities.value
        this.selectmapinfo = {
        address,
        lat,
        lng
      }
      console.log('   this.selectmapinfo ',   this.selectmapinfo )
    });
  },
  destroyed(){
    this.$bus.off("editformxlc")
  },
}
</script>

<style scoped lang='scss'>
.formtips {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.4);
  margin-left: 100px;

}


</style>
